import React from 'react';
import router from 'umi/router';
import { connect } from 'dva';
import { formatterData } from '@/components/SiderMenu';
// import { Tabs } from 'antd'
import Tabs from './Tabs';

const prefixCls = 'fixed-tabs';

const renderTabs = ({ tabList, tabActiveKey, onTabChange, tabBarExtraContent }) => {
  return tabList && tabList.length ? (
    <Tabs
      activeKey={tabActiveKey}
      onChange={key => {
        router.push(key);
        if (onTabChange) {
          onTabChange(key);
        }
      }}
      tabBarExtraContent={tabBarExtraContent}
    >
      {tabList.map(item => (
        <Tabs.TabPane tab={item.tab} key={item.key} />
      ))}
    </Tabs>
  ) : null;
};

const TabManager = ({ children, ...props }) => {
  return (
    <div className={prefixCls}>
      <div className={`${prefixCls}-header`}>{renderTabs(props)}</div>
      <div className={`${prefixCls}-body`}>{children}</div>
    </div>
  );
};

const getTabRoutes = (...args) =>
  formatterData(...args).map(route => {
    const { path, name } = route;
    return {
      key: path,
      tab: name,
    };
  });

@connect(({ app: { user = {} } }) => ({ user }))
class SimpleTabs extends React.Component {
  handleTabChange = key => {};
  render() {
    const {
      user: { authorities = [] },
      // match,
      children,
      route: { routes },
      location: { pathname },
    } = this.props;
    const tabList = getTabRoutes(routes, authorities);
    return (
      <TabManager
        tabList={tabList}
        // tabActiveKey={location.pathname.replace(`${match.path}/`, '')}
        tabActiveKey={pathname}
        onTabChange={this.handleTabChange}
      >
        {children}
      </TabManager>
    );
  }
}

export {
  Tabs
}

export default SimpleTabs;
